<template>
	<div class="foot-bottom">
    <ul class="list-footer">
      <li v-for="(item, index) in menuArr" :key="index" :class="{'active': activePageIndex === index}" @click="changeIndex(index, item)">
        <p><i :class="'ficon ficon-'+index"></i></p>
        <p>{{ item.name }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: "bottom",
  props: {
    activePageIndex: {
      type: Number,
      default: 0
    },
  },
  computed:{
    ...mapGetters(['userInfo', 'uniToken'])
	},
  data() {
		return {
			menuArr: [
        {name: '首页', url: '/pages/preOrder/preOrderHome'},
        {name: '签约', url: '/pages/sign/signing'}, 
        {name: '数据', url: '/pagesA/data/dataCount'},
        {name: '我的', url: '/pages/user/personalCoach'}
      ]
		}
	},
  onShow () {
  },
  onLoad () {
  },
  methods: {
    changeIndex (index, item) {
      this.redirectUrl(item.url)
    }
  }
}
</script>

<style lang="scss" scoped>
.foot-bottom{
  width: 100%;
  height: 104rpx;
  background: #FFFFFF;
  position: fixed;
  left: 0;
  bottom: 0;
  border-top: 1px solid #eee;
  z-index: 10;
  .list-footer{
    width: 100%;
    height: 104rpx;
    padding-top: 13rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    li{
      font-weight: 500;
      font-size: 20rpx;
      color: #575757;
      width: 25%;
      height: 100%;
      text-align: center;
      display: inline-block;
    } 
  }
  .ficon{
    width: 50rpx;
    height: 50rpx;
    display: inline-block;
  }
  .ficon-0{
    background: url('../../static/home.png') no-repeat 0 0;
    background-size: cover;
  }
  .ficon-1{
    background: url('../../static/prebook.png') no-repeat 0 0;
    background-size: cover;
  }
  .ficon-2{
    background: url('../../static/data.png') no-repeat 0 0;
    background-size: cover;
  }
  .ficon-3{
    background: url('../../static/mine.png') no-repeat 0 0;
    background-size: cover;
  }
  .active{
    color: #FF5A20 !important;
    .ficon-0{
      background: url('../../static/homeH.png') no-repeat 0 0;
      background-size: cover;
    }
    .ficon-1{
      background: url('../../static/prebookH.png') no-repeat 0 0;
      background-size: cover;
    }
    .ficon-2{
      background: url('../../static/dataH.png') no-repeat 0 0;
      background-size: cover;
    }
    .ficon-3{
      background: url('../../static/mineH.png') no-repeat 0 0;
      background-size: cover;
    }
  }
}
</style>
